<%--
  Created by IntelliJ IDEA.
  User: 刘生浩
  Date: 2021/11/2
  Time: 16:57
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<%@ include file="../common/IncludeTop.jsp"%>
<head>
  <link rel="StyleSheet" href="css/jpetstore.css" type="text/css"
        media="screen" />

  <meta name="generator"
        content="HTML Tidy for Linux/x86 (vers 1st November 2002), see www.w3.org" />
  <title>JPetStore Demo</title>
  <meta content="text/html; charset=windows-1252"
        http-equiv="Content-Type" />
  <meta http-equiv="Cache-Control" content="max-age=0" />
  <meta http-equiv="Cache-Control" content="no-cache" />
  <meta http-equiv="expires" content="0" />
  <meta http-equiv="Expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
  <meta http-equiv="Pragma" content="no-cache" />
</head>

<body>


<div id="Content">


    <style type="text/css">

        table {
            width: 700px;
            padding: 0;
            margin: 0;
        }

        caption {
            padding: 0 0 5px 0;
            width: 700px;
            font: italic 16px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
            text-align: right;
        }

        th {
            font: bold 16px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
            color: #4f6b72;
            border-right: 1px solid #C1DAD7;
            border-bottom: 1px solid #C1DAD7;
            border-top: 1px solid #C1DAD7;
            letter-spacing: 2px;
            text-transform: uppercase;
            text-align: left;
            padding: 6px 6px 6px 12px;
            background: #d5eaca no-repeat;
        }

        th.nobg {
            border-top: 0;
            border-left: 0;
            border-right: 1px solid #C1DAD7;
            background: none;
        }

        td {
            border-right: 1px solid #C1DAD7;
            border-bottom: 1px solid #C1DAD7;
            background: #8FBC8F;
            font-size:16px;
            padding: 6px 6px 6px 12px;
            color: 		#F5FFFA;
        }


        td.alt {
            background: #F5FAFA;
            color: #797268;
        }

        th.spec {
            border-left: 1px solid #C1DAD7;
            border-top: 0;
            background: #fff no-repeat;
            font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
        }

        th.specalt {
            border-left: 1px solid #C1DAD7;
            border-top: 0;
            background: #f5fafa no-repeat;
            font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
            color: #797268;
        }
    </style>
    <style type="text/css">
        #Banner,#PoweredBy{
            background-color:#8FBC8F;
        }
    </style>
<style>

    body{
        background: #8FBC8F ;
    }

    .button{
        cursor: pointer;
        width: 180px;
        line-height: 38px;
        text-align: center;
        font-weight: bold;
        color: #fff;
        text-shadow:1px 1px 1px #333;
        border-radius: 5px;
        margin:0 20px 20px 0;
        position: relative;
        overflow: hidden;
    }
    .button:nth-child(6n){
        margin-right: 0;
    }
    .button.green{
        border:1px solid #64c878;
        box-shadow: 0 1px 2px #b9ecc4 inset,0 -1px 0 #6c9f76 inset,0 -2px 3px #b9ecc4 inset;
        background: -webkit-linear-gradient(top,#90dfa2,#84d494);
        background: -moz-linear-gradient(top,#90dfa2,#84d494);
        background: linear-gradient(top,#90dfa2,#84d494);
    }
    .green:hover{
        background: -webkit-linear-gradient(top,#aaebb9,#82d392);
        background: -moz-linear-gradient(top,#aaebb9,#82d392);
        background: linear-gradient(top,#aaebb9,#82d392);
    } .green:active{
          top:1px;
          box-shadow: 0 1px 3px #4d7254 inset,0 3px 0 #fff;
          background: -webkit-linear-gradient(top,#5eac6e,#72b37e);
          background: -moz-linear-gradient(top,#5eac6e,#72b37e);
          background: linear-gradient(top,#5eac6e,#72b37e);
      }


  .okTips{
    color:green;
  }
  .errorTips{
    color:red;
  }
</style>


  <script type="text/javascript">
    var xmlHttpRequest;
    function createXMLHttpRequest()
    {
      if (window.XMLHttpRequest) //非IE浏览器
      {
        xmlHttpRequest = new XMLHttpRequest();
      }
      else if (window.ActiveObject)//IE6以上浏览器
      {
        xmlHttpRequest = new ActiveObject("Msxml2.XMLHTTP");
      }
      else //IE6及以下浏览器
      {
        xmlHttpRequest = new ActiveObject("Microsoft.XMLHTTP");
      }
    }

       $(function (){
           $('#username').on('blur',function(){
               if(this.value ==="")
                   $('#usernameTips').attr("class","errortips").text('用户名不能为空');

             $.ajax({
                 type  : "GET",
                 url   : "usernameExist?username="+this.value,
                 success : function(data){
                    //console.log(data);
                      if(data.code===1){
                           $('#usernameTips').attr("class","errortips").text('该用户名不可用');
                      }else if(data.code===0){
                           $('#usernameTips').attr("class","oktips").text('该用户名可用');
                      }
                 }
             });
           });

           var password;
           $('#password').on('blur',function(){
               password= this.value
               if(this.value ==="") $('#passwordTips1').attr("class","errortips").text('密码不能为空');
               else  $('#passwordTips1').attr("class","oktips").text('OK');
               console.log(password);
           });
           $('#repeatedPassword').on('blur',function(){
               //var password=$('#password').val();
               if(this.value ==="")
                   $('#passwordTips').attr("class","errortips").text('密码不能为空');
               else {
               $.ajax({
                   type  : "GET",
                   url   : "passwordRepeat?repeatedPassword="+this.value+"&password="+password,
                   success : function(data){
                       console.log(data);
                       if(data==="Error"){
                           $('#passwordTips').attr("class","errortips").text('两次密码不一致');
                       }else if(data==="OK"){
                           $('#passwordTips').attr("class","oktips").text('OK');
                       }
                   }
               });
               }
           });



       });


    function sendRequest(url){
      createXMLHttpRequest();
      xmlHttpRequest.open("GET", url, true);
      xmlHttpRequest.onreadystatechange = processResponse;
      xmlHttpRequest.send(null);
    }

    function processResponse(){
      if(xmlHttpRequest.readyState == 4){
        if(xmlHttpRequest.status == 200){
          var responseInfo = xmlHttpRequest.responseXML.getElementsByTagName("info")[0].firstChild.data;
          var div1 = document.getElementById("usernameInfo");
          if(responseInfo == "Exist"){
            div1.innerHTML="&lt;font color='red'>The User ID is Exist&lt;/font>";
          }
          else{
            div1.innerHTML="&lt;font color='green'>The User ID is Available&lt;/font>";
          }
        }
      }
    }

  </script>

  <div id="Catalog">

    <form action="SaveInformation" method="post" name="userInfo" id="userInfo">

      <h3>User Information</h3>

      <table  class="imagetable">
        <tr>
          <td>User ID:</td>
          <td>
            <input type="text" name="username" id="username" >
<%--            <div id="usernameInfo"></div>--%>
            <span id="usernameTips"></span>
          </td>
        </tr>
        <tr>
          <td>New password:</td>
          <td>
              <input type="password" name="password"  id="password" />
              <span id="passwordTips1"></span>
          </td>
        </tr>
        <tr>
          <td>Repeat password:</td>
          <td>
              <input type="password" name="repeatedPassword"  id="repeatedPassword"/>
              <span id="passwordTips"></span>
          </td>
        </tr>
      </table>

<%--     <include file="IncludeAccountFields.html"></include>--%>
      <h3>Account Information</h3>

      <table  class="imagetable">
        <tr>
          <td>First name:</td>
          <td><input type="text" name="firstname" /></td>
        </tr>
        <tr>
          <td>Last name:</td>
          <td><input type="text" name="lastname" /></td>
        </tr>
        <tr>
          <td>Email:</td>
          <td><input type="text" name="email" /></td>
        </tr>
        <tr>
          <td>Phone:</td>
          <td><input type="text" name="phone" /></td>
        </tr>
        <tr>
          <td>Address 1:</td>
          <td><input type="text" name="address1" /></td>
        </tr>
        <tr>
          <td>Address 2:</td>
          <td><input type="text" name="address2" size="40" /></td>
        </tr>
        <tr>
          <td>City:</td>
          <td><input type="text" name="city" /></td>
        </tr>
        <tr>
          <td>State:</td>
          <td><input type="text" name="state" size="4" /></td>
        </tr>
        <tr>
          <td>Zip:</td>
          <td><input type="text" name="zip" size="10" /></td>
        </tr>
        <tr>
          <td>Country:</td>
          <td><input type="text" name="country" size="15" /></td>
        </tr>
      </table>

      <h3>Profile Information</h3>

      <table  class="imagetable">
        <tr>
          <td>Language Preference:</td>
          <td><select name="languagePreference">
            <!-- 循环 -->
<%--            <option>${language }</option>--%>
            <option selected="selected" value="English">English</option>
            <option value="Chinese">Chinese</option>
            <option value="japanese">japanese</option>
          </select></td>
        </tr>
        <tr>
          <td>Favourite Category:</td>
          <td><select name="account.favouriteCategoryId">
            <option value="FISH">FISH</option>
            <option selected="selected" value="DOGS">DOGS</option>
            <option value="REPTILES">REPTILES</option>
            <option value="CATS">CATS</option>
            <option value="BIRDS">BIRDS</option>
          </select></td>
        </tr>
<%--        <tr>--%>
<%--          <td>Enable MyList</td>--%>
<%--          <td><input type="checkbox" name="listOption" value="1" /></td>--%>
<%--        </tr>--%>
<%--        <tr>--%>
<%--          <td>Enable MyBanner</td>--%>
<%--          <td><input type="checkbox" name="bannerOption" value="1" /></td>--%>
<%--        </tr>--%>

      </table>

      <input type="submit" name="newAccount" class="button green" value="Save Account Information"/>

    </form>
  </div>

</div>

<div id="Footer">

  <div id="PoweredBy">&nbsp<a href="www.csu.edu.cn">www.csu.edu.cn</a>
  </div>

  <div id="Banner">
    IncludeBottom.html
  </div>
    <style type="text/css">
        #Menu,#Logo,#Search{
            background-color:			#F5FFFA;
        }
    </style>
    <style type="text/css">
        #QuickLinks{
            background-color:	#8FBC8F;
        }
    </style>
</div>

</body>
</html>
